<template>
    <div class="comp-order-tracks" v-loading.fullscreen="loading">
        <template v-if="order">
            <div class="track" v-for="track in tracks" :key="track.id" :class="{ finished: track.finished === 'yes' }">
                <div class="line"></div>
                <div class="icon"></div>
                <div class="handler">
                    <div class="name">
                        <span>{{ track.handler.name }}</span>
                        <span style="margin: 0 2px">-</span>
                        <span v-if="track.handler.depments.length > 0 && track.handler.depments[0].dept.id === track.dept.id">{{ track.handler.depments[0].duty }}</span>
                    </div>
                </div>
                <div class="content">
                    <div class="value">{{ track.dept.name }}</div>
                </div>
                <div class="content" v-if="track.finished === 'yes'">
                     <div class="name"  v-if="!track.isAdmin">
                       <span v-if="track.handling === 'return'">未</span>
                       <span>{{ track.typeText }}</span>
                       <span style="margin-left: 2px" v-if="track.handling !== 'yes'">({{ track.handlingText }})</span>
                       <span style="margin: 0 4px">·</span>
                     </div>
                     <div class="value" v-if="!track.isAdmin">{{ track.finishedAt }}</div>
                </div>
                <div class="content" v-else>
                    <div class="name" v-if="track.type === 'relay'">
                        <span>{{ track.typeText }}</span>
                        <span>中</span>
                        <span style="margin: 0 4px">·</span>
                    </div>
                    <div class="name" v-else>
                        <span>待</span>
                        <span>{{ track.typeText }}</span>
                        <span style="margin: 0 4px">·</span>
                    </div>
                    <div class="value">
                        <!-- {{track}} -->
                        <span v-if="track.countdownAt">剩余{{ track.countdownAt }}</span>
                        <span style="color: #f22200" v-else>已超时<button style="padding:1px;margin-left:5px" @click="cb(track)">催办</button></span>
                    </div>
                </div>
                <div class="signs" v-if="track.type === 'relay' && track.signs.length > 0">
                    <div class="sign" :key="sign.id" v-for="sign in track.signs">
                        <div class="row" v-if="sign.isAdmin !== '1'">
                            <div class="name">转派给：</div>
                            <div class="value">
                                <span>{{ sign.dept.name }}</span>
                                <span style="margin: 0 2px">-</span>
                                <span>{{ sign.handler.name }}</span>
                            </div>
                        </div>
                        <div class="row" v-if="sign.isAdmin !== '1'">
                            <div class="name">转派时间：</div>
                            <div class="value">{{ sign.createdAt }}</div>
                        </div>
                        <div class="row" v-if="profile.role !=='staff' && sign.isAdmin !== '1'">
                            <div class="name">转派意见：</div>
                            <div class="value">{{ sign.content }}</div>
                            <div class="edit" @click="setSign('start', [track, sign])" v-if="editable">编辑</div>
                        </div>
                        <div class="row" v-if="sign.files.length > 0">
                            <div class="name">转派附件：</div>
                            <div class="value">
                                <comp-files-viewer :files="sign.files"></comp-files-viewer>
                            </div>
                        </div>
                        <div class="row" v-if="profile.role !=='staff' && sign.isAdmin !== '1'">
                            <div class="name">答复状态：</div>
                            <div class="value">{{ sign.typeText }}</div>
                        </div>
                        <div class="row" v-if="sign.finished === 'not' && sign.isAdmin !== '1'">
                            <div class="name">答复耗时：</div>
                            <div class="value">{{ sign.duration }}<span style="color: #f22200" v-if="sign.stime>'259200000'">  &nbsp;&nbsp;超时答复</span></div>
                             
                        </div>
                        <div class="row" v-if="sign.finished === 'yes' && sign.type === 'reply' && profile.role !=='staff'">
                            <div class="name">答复时间：</div>
                            <div class="value">{{ sign.finishedAt }}</div>
                        </div>
                        <div class="row" v-if="sign.finished === 'yes' && sign.type === 'reply'  && profile.role !=='staff' && sign.isAdmin !== '1'">
                            <div class="name">答复耗时：</div>
                            <div class="value">{{ sign.duration }}<span style="color: #f22200" v-if="sign.stime>'259200000'">  &nbsp;&nbsp;超时答复</span></div> 

                        </div>
                        <div class="row" v-if="sign.finished === 'yes' && sign.type === 'reply'">
                            <div class="name">答复意见：</div>
                            <div class="value">{{ sign.replyContent }}</div>
                            <div class="edit" @click="setSign('start', [track, sign])" v-if="editable">编辑</div>
                        </div>
                        <div class="row" v-if="sign.finished === 'yes' && sign.type === 'return'">
                            <div class="name">退回时间：</div>
                            <div class="value">{{ sign.finishedAt }}</div>
                        </div>
                        <div class="row" v-if="sign.finished === 'yes' && sign.type === 'return'">
                            <div class="name">退回意见：</div>
                            <div class="value">{{ sign.replyContent }}</div>
                            <div class="edit" @click="setSign('start', [track, sign])" v-if="editable">编辑</div>
                        </div>
                        <div class="row" v-if="sign.finished === 'yes' && sign.type === 'revoke'">
                            <div class="name">撤回时间：</div>
                            <div class="value">{{ sign.finishedAt }}</div>
                        </div>
                        <div class="row" v-if="sign.finished === 'yes' && (sign.type === 'reply' || sign.type === 'return') && sign.replyFiles.length > 0">
                            <div class="name">
                                <span v-if="sign.type === 'reply'">答复</span>
                                <span v-else-if="sign.type === 'return'">退回</span>
                                <span>附件：</span>
                            </div>
                            <div class="value">
                                <comp-files-viewer :files="sign.replyFiles"></comp-files-viewer>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content" v-if="track.finished === 'yes' && track.type !== 'relay'">
                    <div class="name">
                        <span v-if="track.handling === 'yes' || track.handling === 'revoke'">{{ track.typeText }}</span>
                        <span v-else-if="track.handling === 'return'">退回</span>
                        <span>意见：</span>
                    </div>
                    <div class="value">{{ track.content }}</div>
                    <div class="edit" @click="setTrack('start', track)" v-if="editable">编辑</div>
                </div>
                <div class="content" v-if="track.finished === 'yes' && track.type !== 'relay' && track.files.length > 0">
                    <div class="name">
                        <span v-if="track.handling === 'yes' || track.handling === 'revoke'">{{ track.typeText }}</span>
                        <span v-else-if="track.handling === 'return'">退回</span>
                        <span>附件：</span>
                    </div>
                    <div class="value">
                        <comp-files-viewer :files="track.files"></comp-files-viewer>
                    </div>
                </div>
                <template v-if="track.finished === 'yes' && track.copytos.length > 0">
                    <div class="content" v-for="copyto in track.copytos" :key="copyto.id">
                        <div class="name">抄送给：</div>
                        <div class="value">{{ copyto.name }}</div>
                    </div>
                </template>
            </div>
            <div class="track finished last">
                <div class="line"></div>
                <div class="icon"></div>
                <div class="handler">
                    <div class="name">
                        <span>{{ order.creator.name }}</span>
                        <span style="margin: 0 2px" v-if="order.userIdDeptRelList">-</span>
                        <!-- <span style="margin: 0 2px" v-if="order.creator.role === 'holder'">-</span> -->
                        <span v-if="order.userIdDeptRelList">{{ theSum }}</span>
                    </div>
                </div>
                <div class="content" v-if="order.userIdDeptRelList">
                    <div class="value">{{ theSam }}</div>
                </div>
                <div class="content" v-else-if="order.creator.role === 'holder'">
                    <div class="value">{{ theSam }}</div>
                </div>
                <div class="content">
                    <div class="name">
                        <span>提交</span>
                        <span style="margin: 0 4px">·</span>
                    </div>
                    <div class="value">{{ order.createdAt }}</div>
                </div>
            </div>
        </template>
        <comp-dialog title="编辑意见" ref="trackForm" @close="setTrack('end')">
            <el-form size="small" label-width="70px" style="margin-right: 20px" @submit.native.prevent v-if="trackForm">
                <el-form-item label="意见：">
                    <el-input type="textarea" v-model="trackForm.content" style="width: 360px" placeholder="请输入" :maxlength="1000" :rows="5" resize="none" :readonly="loading" @change="setTrack('validate')"></el-input>
                </el-form-item>
                <el-form-item label="附件：">
                    <div style="width: 360px">
                        <el-tag style="margin: 0 10px 10px 0" v-for="(file, index) in trackForm.files" :key="index" disable-transitions closable @close="setTrack('delete-file', file)">{{ file.name }}</el-tag>
                    </div>
                    <el-button type="plain" icon="el-icon-plus" @click="setTrack('upload-file', 'image')">选择图片</el-button>
                    <el-button type="plain" icon="el-icon-plus" @click="setTrack('upload-file', 'document')">选择文档</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-check" @click="setTrack('submit')">保存</el-button>
                    <el-button type="plain" icon="el-icon-close" @click="setTrack('end')">放弃</el-button>
                </el-form-item>
            </el-form>
        </comp-dialog>
        <comp-dialog title="编辑转派意见" ref="signForm" @close="setSign('end')">
            <el-form size="small" label-width="98px" style="margin-right: 20px" @submit.native.prevent v-if="signForm">
                <el-form-item label="转派意见：">
                    <el-input type="textarea" v-model="signForm.content" style="width: 360px" placeholder="请输入" :maxlength="1000" :rows="5" resize="none" :readonly="loading" @change="setSign('validate')"></el-input>
                </el-form-item>
                <el-form-item label="转派附件：">
                    <div style="width: 360px">
                        <el-tag style="margin: 0 10px 10px 0" v-for="(file, index) in signForm.files" :key="index" disable-transitions closable @close="setSign('delete-file', file)">{{ file.name }}</el-tag>
                    </div>
                    <el-button type="plain" icon="el-icon-plus" @click="setSign('upload-file', 'image')">选择图片</el-button>
                    <el-button type="plain" icon="el-icon-plus" @click="setSign('upload-file', 'document')">选择文档</el-button>
                </el-form-item>
                <el-form-item label="答复意见：" v-if="signForm.type === 'reply'">
                    <el-input type="textarea" v-model="signForm.replyContent" style="width: 360px" placeholder="请输入" :maxlength="1000" :rows="5" resize="none" :readonly="loading" @change="setSign('validate')"></el-input>
                </el-form-item>
                <el-form-item label="答复附件：" v-if="signForm.type === 'reply'">
                    <div style="width: 360px">
                        <el-tag style="margin: 0 10px 10px 0" v-for="(file, index) in signForm.replyFiles" :key="index" disable-transitions closable @close="setSign('delete-reply-file', file)">{{ file.name }}</el-tag>
                    </div>
                    <el-button type="plain" icon="el-icon-plus" @click="setSign('upload-reply-file', 'image')">选择图片</el-button>
                    <el-button type="plain" icon="el-icon-plus" @click="setSign('upload-reply-file', 'document')">选择文档</el-button>
                </el-form-item>
                <el-form-item label="退回意见：" v-if="signForm.type === 'return'">
                    <el-input type="textarea" v-model="signForm.replyContent" style="width: 360px" placeholder="请输入" :maxlength="1000" :rows="5" resize="none" :readonly="loading" @change="setSign('validate')"></el-input>
                </el-form-item>
                <el-form-item label="退回附件：" v-if="signForm.type === 'return'">
                    <div style="width: 360px">
                        <el-tag style="margin: 0 10px 10px 0" v-for="(file, index) in signForm.replyFiles" :key="index" disable-transitions closable @close="setSign('delete-reply-file', file)">{{ file.name }}</el-tag>
                    </div>
                    <el-button type="plain" icon="el-icon-plus" @click="setSign('upload-reply-file', 'image')">选择图片</el-button>
                    <el-button type="plain" icon="el-icon-plus" @click="setSign('upload-reply-file', 'document')">选择文档</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-check" @click="setSign('submit')">保存</el-button>
                    <el-button type="plain" icon="el-icon-close" @click="setSign('end')">放弃</el-button>
                </el-form-item>
            </el-form>
        </comp-dialog>
    </div>
</template>

<script>
    import mixin from "../mixin";
    import { string, int, deepCopy, selectFile } from "../util";
  
    export default {
        name: "comp-order-tracks",
        mixins: [mixin],
        props: {
            order: { type: Object, default: null },
            editable: { type: Boolean, default: false },
        },
        data: () => ({
            loading: false,
            trackForm: null,
            signForm: null,
            timer: null,
            tracks:null,
        }),
         computed: {
            theSum() {
      // 计算数值的总和
                var bumen = ""
                if(this.order.userIdDeptRelList){
                    // console.log(1111);
                    this.order.userIdDeptRelList.forEach(e => {
                           bumen += e.deptDuty +"、"
                       });
                         return bumen.slice(0, -1)
                }else{

                    return ""
                }
             
              
            },
            theSam(){
                var zhiwu = ""
                     if(this.order.userIdDeptRelList){
                    this.order.userIdDeptRelList.forEach(e => {
                           zhiwu += e.deptIdDepartment.deptName +"、"
                       });
                         return zhiwu.slice(0, -1)
                }else{

                    return ""
                }
            }
        },
        methods: {
             async cb(track){  
                   var zId="";
                   var type="";
              
                if(track.signs&&track.signs.length>0){
                    if(track.signs[0].type>0){

                    }else{
                       zId = track.signs[0].id;
                      type ="1";
                        console.log(zId);
                    }
                }else{
                   zId = track.id;
                  type = "0";
                } 
                var data={
                    zId:zId,
                    type:type
                }
                // console.log(data);
                // return
                let res = await this.plugins.user.getCbone(data);
                if(res.code==0){
                    this.plugins.modal.alert("", "催办成功", "success");

                }else{
                 this.plugins.modal.alert("页面加载失败", res.code + "：" + res.msg, "error");

                }
            },
            uploadFile(type, file, callback) {
                if (this.loading) return;
                if (type && file) {
                    let timer = null;
                    let progress = (event) => timer = clearTimeout(timer) || setTimeout(() => this.plugins.modal.toast("上传进度：" + event.percent + "%", "info"), 200);
                    this.loading = true;
                    this.plugins.user.uploadFile(file, type, progress).then((res) => {
                        this.loading = false;
                        if (res.code === 0) string(() => callback(res.data));
                        else this.plugins.modal.alert("上传失败", res.code + "：" + res.msg, "error");
                    });
                } else if (type === "image") {
                    selectFile("image/*").then((file) => {
                        if (file.size > 5 * 1048576) this.plugins.modal.toast("图片过大，不能大于5MB哦！请重新选择。", "error");
                        else this.uploadFile(type, file, callback);
                    });
                } else if (type === "document") {
                    selectFile(".xls,.xlsx,.doc,.docx,.pdf").then((file) => {
                        if (file.size > 10 * 1048576) this.plugins.modal.toast("文档过大，不能大于10MB哦！请重新选择。", "error");
                        else this.uploadFile(type, file, callback);
                    });
                }
            },
            setTrack(action, data) {
                if (this.loading) return;
                let order = this.order;
                let track = this.trackForm;
                if (action === "start" || !action) {
                    this.trackForm = deepCopy(data);
                    this.setTrack("validate");
                    this.$refs.trackForm.init();
                } else if (action === "validate") {
                    let form = track;
                    let error = "";
                    form.content = string(form.content);
                    if (data) this.plugins.modal.toast(error, "error");
                    return !error;
                } else if (action === "upload-file") {
                    let type = data;
                    if (type) this.uploadFile(type, null, (file) => {
                        track.files.push(file);
                        this.setTrack("validate");
                    });
                } else if (action === "delete-file") {
                    let file = data;
                    let index = track.files.indexOf(file);
                    if (index > -1) track.files.splice(index, 1);
                } else if (action === "submit") {
                    if (!this.setTrack("validate", true)) return;
                    this.loading = true;
                    this.plugins.user.setOrderTrack(order, track).then((res) => {
                        this.loading = false;
                        if (res.code === 0) {
                            this.plugins.modal.toast("保存成功！", "success");
                            this.setTrack("end");
                            this.$emit("updated");
                        } else {
                            this.plugins.modal.alert("保存失败", res.code + "：" + res.msg, "error");
                        }
                    });
                } else if (action === "end") {
                    this.$refs.trackForm.close();
                }
            },
            setSign(action, data) {
                if (this.loading) return;
                let order = this.order;
                let track = this.trackForm;
                let sign = this.signForm;
                if (action === "start" || !action) {
                    this.trackForm = deepCopy(data[0]);
                    this.signForm = deepCopy(data[1]);
                    this.setSign("validate");
                    this.$refs.signForm.init();
                } else if (action === "validate") {
                    let form = sign;
                    let error = "";
                    form.content = string(form.content);
                    form.replyContent = string(form.replyContent);
                    if (data) this.plugins.modal.toast(error, "error");
                    return !error;
                } else if (action === "upload-file") {
                    let type = data;
                    if (type) this.uploadFile(type, null, (file) => {
                        sign.files.push(file);
                        this.setSign("validate");
                    });
                } else if (action === "delete-file") {
                    let file = data;
                    let index = sign.files.indexOf(file);
                    if (index > -1) sign.files.splice(index, 1);
                } else if (action === "upload-reply-file") {
                    let type = data;
                    if (type) this.uploadFile(type, null, (file) => {
                        sign.replyFiles.push(file);
                        this.setSign("validate");
                    });
                } else if (action === "delete-reply-file") {
                    let file = data;
                    let index = sign.replyFiles.indexOf(file);
                    if (index > -1) sign.replyFiles.splice(index, 1);
                } else if (action === "submit") {
                    if (!this.setSign("validate", true)) return;
                    this.loading = true;
                    this.plugins.user.setOrderTrackSign(order, track, sign).then((res) => {
                        this.loading = false;
                        if (res.code === 0) {
                            this.plugins.modal.toast("保存成功！", "success");
                            this.setSign("end");
                            this.$emit("updated");
                        } else {
                            this.plugins.modal.alert("保存失败", res.code + "：" + res.msg, "error");
                        }
                    });
                } else if (action === "end") {
                    this.$refs.signForm.close();
                }
            },
            clock() {
                if(this.order.status ==="finished" && this.profile.role === "staff"){
                    this.tracks = this.order.tracks.slice(0,2)
                }else{

                    if(this.profile.role === "staff"){
                        this.tracks = [{
                        handler:this.order.tracks[0].handler,
                        dept:this.order.tracks[0].dept,
                        typeText:"处理中",
                        countdown:this.order.tracks[0].countdown,
                    }];
                    }else{

                        this.tracks = this.order.tracks
                    }
                  
                }
                this.timer = clearTimeout(this.timer) || setTimeout(() => this.clock(), 1000);
                // console.log(this.order.tracks);

           this.order && this.tracks.forEach((track) => {
                    let value = Math.ceil(Math.max(track.countdown - Date.now(), 0) / 1000);

                    let days = Math.floor(value / 86400);
                    let hours = Math.floor(value % 86400 / 3600);
                    let minutes = Math.floor(value % 3600 / 60);
                    let seconds = Math.floor(value % 60);
                    let text = days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";

                    if (value > 0){
         

                            track.countdownAt = text.replace("0天0小时0分钟", "").replace("0天0小时", "").replace("0天", "");
                        
                    }
                     
                    else track.countdownAt = "";
                });
            },
        },
        mounted() {
            this.clock();
        },
        beforeDestroy() {
            this.timer && clearTimeout(this.timer);
        },
    };
</script>

<style lang="scss">
    .comp-order-tracks {
        overflow: hidden;

        & > .track {
            margin-right: 12px;
            padding: 0 0 18px 32px;

            & > .line {
                position: absolute;
                top: 20px;
                left: 9.5px;
                width: 1px;
                height: calc(100% - 20px);
                background-color: #eee;
            }

            & > .icon {
                position: absolute;
                top: 0;
                left: 0;
                width: 20px;
                height: 20px;
                background: url(../assets/icon70.png) no-repeat center center/contain;
            }

            & > .handler {
                display: flex;
                align-items: flex-start;

                & > .name {
                    flex: 1 1 0;
                    min-height: 20px;
                    color: #333;
                    font-size: 16px;
                    line-height: 20px;
                }
            }

            & > .content {
                display: flex;
                align-items: flex-start;
                margin-top: 6px;

                & > .name {
                    flex: 0 0 auto;
                    height: 18px;
                    color: #999;
                    font-size: 14px;
                    line-height: 18px;
                }

                & > .value {
                    flex: 0 1 auto;
                    min-height: 18px;
                    color: #999;
                    font-size: 14px;
                    line-height: 18px;
                    white-space: pre-wrap;
                    overflow: hidden;
                }

                & > .edit {
                    flex: 0 0 auto;
                    margin-left: 12px;
                    padding: 2px 0 2px 20px;
                    height: 14px;
                    color: #1677ff;
                    line-height: 1;
                    background: url() no-repeat 1px 1px / 16px 16px;
                    user-select: none;
                    cursor: pointer;
                }
            }

            & > .signs {
                overflow: hidden;

                & > .sign {
                    margin-top: 6px;
                    margin-right: 6px;
                    border-top: solid 1px #eee;
                    padding-top: 6px;

                    & > .row {
                        display: flex;
                        align-items: flex-start;
                        margin-top: 6px;

                        & > .name {
                            flex: 0 0 auto;
                            height: 18px;
                            color: #999;
                            font-size: 14px;
                            line-height: 18px;
                        }

                        & > .value {
                            flex: 0 1 auto;
                            min-height: 18px;
                            color: #999;
                            font-size: 14px;
                            line-height: 18px;
                            overflow: hidden;

                            & > .file {
                                display: flex;
                                align-items: flex-start;
                                margin-top: 4px;

                                & > .index {
                                    flex: 0 0 auto;
                                    margin-right: 4px;
                                    height: 18px;
                                    color: #1677ff;
                                    font-size: 14px;
                                    line-height: 18px;
                                }

                                & > .name {
                                    flex: 0 1 auto;
                                    min-height: 18px;
                                    color: #1677ff;
                                    font-size: 14px;
                                    line-height: 18px;
                                    word-break: break-all;
                                }

                                &:first-child {
                                    margin-top: 0;
                                }
                            }
                        }

                        & > .edit {
                            flex: 0 0 auto;
                            margin-left: 12px;
                            padding: 2px 0 2px 20px;
                            height: 14px;
                            color: #1677ff;
                            line-height: 1;
                            background: url() no-repeat 1px 1px / 16px 16px;
                            user-select: none;
                            cursor: pointer;
                        }

                        &:first-child {
                            margin-top: 0;
                        }
                    }
                }
            }

            &.finished {
                & > .line {
                    background-color: #1677ff;
                }

                & > .icon {
                    background-image: url(../assets/icon71.png);
                }

                & > .handler {
                    color: #1677ff;
                }
            }

            &.last {
                padding-bottom: 0;

                & > .line {
                    display: none;
                }
            }
        }
    }
</style>